<template>
	<view class="lay-root">
		<view class="table-lay">
			<view class="table-head"> {{$t(firstTableName)}} </view>
			<view class="table-content">
				<view class="table-item flex-h" v-for="(item,index) in firstTableContent" :key="index">
					<text class="item-key">{{$t(item.key)}}</text>
					<!-- <text class="item-value">{{ valueData ? valueData[item.value] : '--'}}</text> -->

					<text v-if="item.value != 'has_photo' && item.value != 'has_file' "
						class="item-value">{{  (valueData && valueData[item.value]) ? valueData[item.value] : '--'}}</text>
					<text v-if="item.value == 'has_photo' || item.value == 'has_file' " class="item-value">
						{{$t('public.havaOrNotHave[' +  valueData[item.value] + ']' )}}</text>
				</view>
			</view>
			<view class="second-lay" @click="onSecondClick">
				<view v-if="secondShowType == 0" class="table-show">
					<view class="table-head"> {{secondTableName}} </view>
					<view class="table-content">
						<view class="table-item flex-h" v-for="(item,index) in secondTableContent" :key="index">
							<text class="item-key">{{item.key}}</text>
							<text class="item-value">{{item.value}}</text>
						</view>
					</view>
				</view>

				<view v-if="secondShowType == 1" class="pie-show">
					<view class="table-head"> {{pieChartName}} </view>
					<view class="charts-box">
						<qiun-data-charts type="pie" :chartData="pieChartData" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import qiunDataCharts from "@/uni_modules/qiun-data-charts";
	export default {
		props: {
			infoData: {
				type: Object
			},

			valueData: {
				type: Object
			},
			
			planImplementationData: {
				type:Array
			}
		},

		components: {
			// "qiun-data-charts":qiunDataCharts
		},

		watch: {
			planImplementationData(newVal) {
				this.genPlanPieData();
			}
		},

		data() {
			return {
				firstTableName: '',
				firstTableContent: [],

				secondTableName: '',
				secondTableContent: [],

				pieChartName: '',
				pieChartData: {},

				secondShowType: 1, // 0 table 1 chart
			}
		},

		mounted() {
			this.firstTableName = this.infoData.firstTableName;
			this.firstTableContent = this.infoData.firstTableContent;

			this.secondTableName = this.infoData.secondTableName;
			this.secondTableContent = this.infoData.secondTableContent;

			this.pieChartName = this.infoData.pieChartName;
			this.pieChartData = this.infoData.pieChartData //.series;
			// console.log(this.infoData)
		},

		methods: {
			onSecondClick() {
				// this.secondShowType++;
				// if(this.secondShowType > 1)
				// 	this.secondShowType = 0 ;
			},

			genPlanPieData() {
				console.log("genPlanPieData")
				console.log(this.planImplementationData)
				let _self = this;
				let tempCounts = [0, 0, 0]; // 已实施  实施中  未实施
				this.planImplementationData.forEach(e => {
					if(e.wrk_cls_code >= 0 && e.progress == 2) {
						tempCounts[0]++;
					}
					else if(e.wrk_cls_code >= 0 && e.progress == 0) {
						tempCounts[2]++;
					}
				})

				this.pieChartData.series = [];
				this.pieChartData.series.push({
					data: []
				});
				console.log(this.pieChartData.series[0].data)
				for (let i = 0; i < tempCounts.length; i++) {
					let tempName = '';
					if (i == 0)
						tempName = _self.$t("thickShow.ImplementationCompleted");
					else if (i == 1)
						tempName = _self.$t("thickShow.underImplementation");
					else if (i == 2)
						tempName = _self.$t("thickShow.unimplemented");

					this.pieChartData.series[0].data.push({
						name: tempName,
						value: tempCounts[i]
					})
				}

				console.log(this.pieChartData)
			}
		}
	}
</script>

<style scoped lang="scss">
	.lay-root {
		background-color: #fff;
	}

	.table-head {
		font-size: 12rpx;
		font-weight: 400;
		color: #1F2329;
		background: #E9E9E9;
		// box-shadow: 0px 1px 0px 0px #E8E8E8;
		box-sizing: border-box;
		padding: 4rpx;		
		text-align: center;
	}

	.table-content {
		.table-item {
			width: 100%;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1upx solid #E9E9E9;

			.item-key {
				width: 50%;
				height: 100%;
				font-size: 12rpx;
				color: #333333;
				border-left: 1upx solid #E9E9E9;
				border-right: 1upx solid #E9E9E9;
				// border-bottom: 1upx solid #E9E9E9;
				box-sizing: border-box;
				padding: 4rpx 9rpx;
				background: #F8F8F9;
				box-sizing: border-box;
			}

			.item-value {
				// box-sizing: border-box;
				width: 50%;
				height: 100%;
				font-size: 9upx;
				color: #666666;
				box-sizing: border-box;
				padding: 0 7rpx;
				line-height: 19upx;
				border-right: 1upx solid #E9E9E9;
				// border-top: 1upx solid #E9E9E9;
				// border-bottom: 1upx solid #E9E9E9;
			}
		}
	}

	.table-show {
		width: 100%;
	}

	.pie-show {
		width: 100%;
	}

	.charts-box {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.second-lay {
		align-items: center;
		box-sizing: border-box;
		.item-value {
			text-align: right;
		}
	}
</style>
